<!--
    group: 渠道信息
    name: 签署合同
    url: /registerProcess/downloadContract
-->
<template>
  <div class="box">
    <!--  主体部分  -->
    <div class="main_content">
      <h3>签署合同</h3>
      <a-divider />

      <div class="box_item">
        <div class="item">
          <h4>您已经确认合同内容，请尽快完成线下签署！</h4>
          <p>下载模版后，请完成打印并填写，加盖公章及</p>

          <a-button class="line" @click="downloadTemplate">
            <a-icon type="vertical-align-bottom" />下载模板
          </a-button>
        </div>
        <div class="item">
          <h4>合同寄送地址</h4>
          <p>
            寄送地址：湖北省荆州市沙市区义乌小商品城二期2栋4楼中雄公司 <br>
            收件人：杨昌燕<br>
            联系电话：13707215941
          </p>

          <a-button class="line" @click="copyOnekey">一键复制</a-button>
        </div>

        <footer>
          <a-button class="btnsLarge" type="primary" @click="signContract">合同签署</a-button>
          <a v-if="sign == 1" @click="back(1)">返回</a>
          <a v-else @click="back">返回首页</a>
        </footer>
      </div>

    </div>
  </div>
</template>

<script>
import { getContractRecord, getContractDetails, queryLoginChannel } from '../../api/enterprise'
import { getCaptionAfter, sleep } from '../../utils/util'
export default {
  name: "downloadContract",
  data(){
    return{
      proessId: null,
      protocolType: null,
      agreeSceneCode: null,

      sign: null,  //来源  ''-首页  1合同列表
    }
  },
  created() {
    this.proessId = this.$route.query.zxyAgreeId;
    this.protocolType = this.$route.query.protocolType;
    this.agreeSceneCode = this.$route.query.agreeSceneCode;
    this.sign = this.$route.query.sign;
  },
  methods: {
    //下载模板点击事件
    downloadTemplate(){
      getContractRecord(this.proessId).then(res => {
        if (res.success){
          //总包 1  分包 2
          if(this.protocolType == 1){
            //总包 && agreeSceneCode == 'DOC_30' 走分包接口
            if(this.agreeSceneCode == 'DOC_30'){
              this.contractRecord();
            }else{
              this.generalContractorTemplate();
            }
          }else if(this.protocolType == 2){
            this.contractRecord();
          }
        }else {
          this.$message.warning(res.message);
        }
      })
    },
    //总包模版下载
    generalContractorTemplate(){
      queryLoginChannel().then(res => {
        if (res.success) {
          if (res.result) {
            let data = res.result;

            if(data.agreeInfoVo && data.agreeInfoVo.catalogUrl){
              let catalogUrl = data.agreeInfoVo.catalogUrl
              for (let i = 0; i < catalogUrl.length; i++) {
                const item = catalogUrl[i]
                this.templateDownload(item,"custom")
              }
            }
          }
        }
      })
    },

    //分包模版下载
    contractRecord(){
      getContractDetails(this.proessId).then(res => {
        if (res.success) {
          let data;
          if (res.result) {
            data = res.result.agreeUrl;
          }
          this.templateDownload(data)
        }
      })

    },
    //模版下载事件
    templateDownload(item,type){
      if(item.includes('jpeg') || item.includes('png') || item.includes('jpg') || item.includes('pdf')){
        fetch(item).then((res) => {
          res.blob().then((blob) => {
            const url = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = url
            if(type){
              a.download = getCaptionAfter(item,'_')
            }else{
              a.download = '合同模板';
            }
            a.click()
            window.URL.revokeObjectURL(url);

            sleep(3000);

            this.downTitle = 1;
            this.$message.success('下载成功');
          })
        })
      }else{
        this.$message.warning('模板下载失败')
      }
    },
    //一键复制
    copyOnekey(){
      // var oInput = document.createElement("input"); //创建隐形input 无法识别换行
      var oInput = document.createElement("textarea"); //创建隐形textarea
      oInput.value = '寄送地址：湖北省荆州市沙市区义乌小商品城二期2栋4楼中雄公司 \n 收件人：杨昌燕 \n联系电话：13707215941'
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message.success('复制成功');
      oInput.remove();
    },
    //合同签署
    signContract(){
      this.$router.push({
        path: '/registerProcess/sendingContract',
        query: {
          zxyAgreeId: this.proessId,
          sign: this.sign == 1 ? 1 : ''
        }
      })
    },
    //返回
    back(type){
      if (type == 1){
        this.$router.back();
      }else{
        this.$router.push({
          path: '/index/index'
        })
      }
    },
  }
}
</script>

<style scoped lang="less">
h3{
  font-size: 30px;
}
.box{
  width: 100%;
  background: @color-white;
  padding: 0 10%;
}
.box_item{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.item{
  width: 100%;
  margin-bottom: 30px;
}

h4{
  font-weight: bolder;
  font-size: 20px;
}
a{
  text-decoration: underline;
  margin-left: 10px;
}
p{
  color: @color-black;
}

footer{
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
</style>
